<template>
	<view>
		<uni-collapse ref="collapse" v-model="activeVal" accordion>
			<!-- 二维码水印 -->
			<uni-collapse-item>
				<template v-slot:title>
					<view class="title_border" :class="colorIndex == 1?'text-primary':''">
						<span>二维码水印</span>
						<span style="font-size:22rpx;color:#999999;">默认水印</span>
					</view>
				</template>
				<view class="content">
					<uni-forms ref="ruleForm" :modelValue="qrcodeForm" :rules="rules" label-width="160rpx" type="line"
						label-align="right" style="padding: 20rpx 30rpx 0 10rpx;">
						<uni-forms-item label="水印尺寸" name="qrCodeSize">
							<uni-data-select :localdata="waterMarkSizeOptions" :clear="false" v-model="form.qrCodeSize" placeholder="请选择水印尺寸">
							</uni-data-select>
						</uni-forms-item>
						<uni-forms-item label="水印位置" name="qrCodePosition">
							<uni-data-select :localdata="waterMarkPositionOptions" :clear="false" placeholder="请选择水印位置"
								v-model="form.qrCodePosition" />
						</uni-forms-item>
						<uni-forms-item label="查看权限" name="viewAuth">
							<uni-data-checkbox :localdata="setArr" v-model="form.viewAuth" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-collapse-item>

			<!-- 合同编号水印 -->
			<uni-collapse-item>
				<template v-slot:title>
					<view class="title_border">
						<span>合同编号水印</span>
						<span style="font-size:22rpx;color:#999999;">默认水印</span>
					</view>
				</template>
				<view class="content">
					<uni-forms ref="ruleForm" :modelValue="numberForm" :rules="rules" label-width="180rpx" type="line"
						label-align="right" style="padding: 20rpx 30rpx 0 10rpx;">
						<uni-forms-item label="水印字号" name="contractNumberFontSize">
							<uni-data-select :localdata="waterMarkFontSizeOptions" :clear="false" @change="changeNumberFontSize"
								v-model="contractNumberFontSize" placeholder="请选择水印字号" />
						</uni-forms-item>
						<uni-forms-item label="水印位置" name="contractNumberPosition">
							<uni-data-select :localdata="waterMarkContractNumberPositionOptions"
								v-model="form.contractNumberPosition" :clear="false" placeholder="请选择水印位置"
								class="numberForm" />
						</uni-forms-item>
						<uni-forms-item label="水印透明度" name="contractNumberAlpha">
							<slider value="50" @change="sliderChange" activeColor="#00a660" backgroundColor="#ccc"
								block-color="#fff" :step="10" :max="80" :min="10" show-value
								v-model="form.contractNumberAlpha" />
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-collapse-item>
			
			<view v-for="(item,index) in form.contractWaterMarkTxtImgList" :key="index + 3">
				<!-- 文字水印 -->
				<uni-collapse-item v-if="item.type == 0">
					<template v-slot:title>
						<view class="title_border">
							<span>文字水印</span>
							<i class="iconfont" @click="delcoll(index,item)">&#xe8c1;</i>
						</view>
					</template>
					<view class="content">
						<uni-forms ref="ruleForm" :modelValue="textForm" :rules="rules" label-width="200rpx" type="line"
							label-align="right" style="padding: 20rpx 30rpx 0 10rpx;">
							<uni-forms-item label="文字内容" name="content">
								<uni-easyinput v-model="item.content" type="textarea" placeholder="请输入文字内容" />
							</uni-forms-item>
							<uni-forms-item label="水印字号" name="size">
								<uni-data-select :localdata="sizeArr" :clear="false" v-model="item.fontSizeOne" placeholder="请选择水印字号" @change="changefontSize(item,$event)"/>
							</uni-forms-item>
							<uni-forms-item label="水印位置" name="remark">
								<uni-data-select :localdata="waterMarkTxtPositionOptions" :clear="false"
									placeholder="请选择水印位置" v-model="item.fontPosition" />
							</uni-forms-item>
							<uni-forms-item label="水印平铺角度" name="remark">
								<uni-data-select :localdata="waterMarkAngleOptions" :clear="false"
									placeholder="请选择水印平铺角度" v-model="item.fontAngle" />
							</uni-forms-item>
							<uni-forms-item label="水印透明度" name="contractBusinessTypeId">
								<slider value="50" @change="sliderChange" activeColor="#00a660" backgroundColor="#ccc"
									block-color="#fff" :step="10" :max="80" :min="10" show-value
									v-model="item.fontAlpha" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-collapse-item>

				<!-- 图片水印 -->
				<uni-collapse-item v-if="item.type == 1">
					<template v-slot:title>
						<view class="title_border">
							<span>图片水印</span>
							<i class="iconfont" @click="delcoll(index,item)">&#xe8c1;</i>
						</view>
					</template>
					<view class="content">
						<uni-forms ref="form" :modelValue="imgForm" :rules="rules" label-width="200rpx" type="line"
							label-align="right" style="padding: 20rpx 30rpx 0 10rpx;">
							<uni-forms-item label="水印图片" name="content">
								<img-upload ref="uploadRef" :uploadFileUrl="host + '/common/upload'" text="上传图片"
									@click="handleUploadSuccess" />
							</uni-forms-item>
							<uni-forms-item label="水印位置" name="remark">
								<uni-data-select :localdata="waterMarkTxtPositionOptions" :clear="false"
									placeholder="请选择水印位置" v-model="item.fontPosition" />
							</uni-forms-item>
							<uni-forms-item label="水印平铺角度" name="remark">
								<uni-data-select :localdata="waterMarkAngleOptions" :clear="false"
									placeholder="请选择水印平铺角度" v-model="item.fontAngle" />
							</uni-forms-item>
							<uni-forms-item label="水印透明度" name="contractBusinessTypeId">
								<slider value="50" @change="sliderChange" activeColor="#00a660" backgroundColor="#ccc"
									block-color="#fff" :step="10" :max="80" :min="10" show-value
									v-model="item.fontAlpha" />
							</uni-forms-item>
						</uni-forms>
					</view>
				</uni-collapse-item>
			</view>
		</uni-collapse>
		<view class="add-btn">
			<button @click="addText"><i class="iconfont">&#xe647;</i>文字水印</button>
			<button @click="addImg"><i class="iconfont">&#xe647;</i>图片水印</button>
		</view>
	</view>
</template>
<script>
	import config from '@/config'
	import imgUpload from "@/components/fileUpload/imgUpload"
	export default {
		components: {imgUpload},
		props: {
			dataform: {
				type: [Object],
			},
		},
		data() {
			return {
				contractNumberFontSize:"",
				colorIndex: 0,
				// 查看权限
				setArr: [{
						text: '合同参与人（文件发起方、接收方经办人、签署人、抄送人，企业管理员扫码登录后，均可查看。）',
						value: 0
					},
					{
						text: '企业内部成员（文件发起方、接收方企业内部所有人员扫码登录后，均可查看。）',
						value: 1
					}
				],
				//二维码水印尺寸
				waterMarkSizeOptions: [{
					value: 18,
					text: '18mm*18mm'
				}], 
				//二维码水印位置
				waterMarkPositionOptions: [{
					value: 0,
					text: '右上角(推荐)'
				}, {
					value: 1,
					text: '左上角'
				}], 
				//文字水印字号
				sizeArr: [{
					value: 12,
					text: 12
				}, {
					value: 14,
					text: 14
				}, {
					value: 16,
					text: 16
				}, {
					value: 18,
					text: 18
				}, {
					value: 20,
					text: 20
				}], 
				//合同编号水印位置
				waterMarkContractNumberPositionOptions: [{
					value: 0,
					text: '页脚居右（推荐）'
				}, {
					value: 1,
					text: '页脚居左'
				}], 
				//合同编号水印字号
				waterMarkFontSizeOptions: [{
					value: 12,
					text: 12
				}, {
					value: 14,
					text: 14
				}], 
				//图片水印、文字水印位置
				waterMarkTxtPositionOptions: [{
					value: 0,
					text: '平铺'
				}, {
					value: 1,
					text: '居中'
				}, {
					value: 3,
					text: '自定义(鼠标拖动水印)'
				}],
				//图片水印、文字水印平铺角度
				waterMarkAngleOptions: [{
					value: 0,
					text: '0度'
				}, {
					value: 15,
					text: '15度'
				}, {
					value: 30,
					text: '30度'
				}, {
					value: 45,
					text: '45度'
				}, {
					value: 60,
					text: '60度'
				}, {
					value: 75,
					text: '75度'
				}, {
					value: 90,
					text: '90度'
				}, {
					value: 105,
					text: '105度'
				}, {
					value: 120,
					text: '120度'
				}, {
					value: 135,
					text: '135度'
				}, {
					value: 150,
					text: '150度'
				}, {
					value: 165,
					text: '165度'
				}],
				positionArr: [], //水印位置
				qrcodeForm: { //二维码水印
					status: 0,
				},
				imgForm: {}, //图片水印数据
				textForm: {}, //文字水印数据
				form: {
					status: 1,
					// 默认18
				    qrCodeSize: 18,
					// 默认右上角
					qrCodePosition: 0,
					viewAuth: 0,
					departmentIds: [],
					contractNumberFontSize: 14,
					contractNumberPosition: 0,
					contractNumberAlpha: 50,
					contractWaterMarkTxtImgList: [],
				},
				numberForm: {}, //合同编号水印
				contractNumberTiling: [], //合同编号平铺数据
				//文字水印参数
				waterMarkTxtTiling: [], // 文字水印平铺数据
				waterMarkImgTiling: [], // 图片水印平铺数据      
				activeVal: '0',
				host: config.baseUrl,
				rules: {
					name: [{
							required: true,
							message: "请输入合同类型名称",
							trigger: "blur"
						}, ,
						{
							min: 2,
							max: 12,
							message: '合同类型名称长度需要在2-12个汉字或字符之间，不能包含特殊字符',
							trigger: 'blur'
						}
					],
					contractTypeId: [{
						required: true,
						message: "请选择合同类型",
						trigger: "blur"
					}],
					sort: [{
						required: true,
						message: "请输入排序",
						trigger: "blur"
					}],
				},
			}
		},
		created() {
			this.form = this.dataform
			// 水印字号
			if (this.form.contractNumberFontSize || this.form.contractWaterMarkTxtImgList) {
				this.contractNumberFontSize = JSON.parse(this.form.contractNumberFontSize)
				this.form.contractWaterMarkTxtImgList.forEach(item=>{
					item.fontSizeOne = JSON.parse(item.fontSize)
				})
			}
		},
		methods: {
			/** 修改文字水印字号 */
			changefontSize(item,e){
				item.fontSize = e
			},
			/** 修改合同编号水印字号 */
			changeNumberFontSize(e){
				this.form.contractNumberFontSize = e
			},
			/** 删除水印 */
			delcoll(index, item) {
				// 删除当前水印 
				this.waterMarkTxtTiling = this.waterMarkTxtTiling.filter(watertxtTiling => item.id == undefined ? item
					.ids != watertxtTiling.ids : item.id != watertxtTiling.id);
				// 删除平铺图片水印
				this.waterMarkImgTiling = this.waterMarkImgTiling.filter(watertxtTiling => item.id == undefined ? item
					.ids != watertxtTiling.ids : item.id != watertxtTiling.id);
				this.form.contractWaterMarkTxtImgList.splice(index, 1)
			},
			/** 添加文字水印 */
			addText() {
				this.form.contractWaterMarkTxtImgList.push({
					title: '文字水印',
					ids: Math.random(),
					type: 0,
					fontPosition: 1,
					fontSize: 14,
					fontAlpha: 30,
					content: '',
			 	    lefts: 796 / 2,
			 	    top: 1125 / 2,
					//平铺角度
					fontAngle: 0,
				})
			},
			/** 添加图片水印 */
			addImg() {
				this.form.contractWaterMarkTxtImgList.push({
					title: '图片水印',
					ids: Math.random(),
					type: 1,
			        fontPosition: 3,
					fontSize: 14,
					fontAlpha: 30,
					content: '',
					lefts: 796 / 2,
			        top: 1125 / 2,
					//平铺角度
					fontAngle: 0,
				})
			},

		}
	}
</script>

<style scoped lang="scss">
	::v-deep .uni-data-checklist .checklist-group .checklist-box .checklist-content .checklist-text{
		font-size: 26rpx;
	}
	.add-btn {
		display: flex;
		justify-content: space-between;
		width: 75%;
		margin: 30rpx auto 0;

		button {
			font-size: 26rpx;
			background: #fff;
			color: $uni-color-primary;
			border: 2rpx solid $uni-color-primary;
			width: 240rpx;

			.iconfont {
				margin-right: 6rpx;
				font-size: 26rpx;
			}
		}
	}

	.title_border {
		height: 70rpx;
		line-height: 70rpx;
		padding-left: 30rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	::v-deep .uni-easyinput__content-textarea {
		height: 100rpx;
		min-height: 100rpx;
	}

	::v-deep .uni-forms-item {
		margin-bottom: 36rpx;
	}

	::v-deep .uniui-forward {
		color: #000 !important;
	}

	::v-deep .uni-collapse-item__title-text {
		&:hover {
			color: $uni-color-primary;
		}
	}

	::v-deep .uni-select__selector {
		z-index: 4;
	}
</style>
